<template>
  <el-dialog @close="btnNo" :title="title" :visible="showDialog">
    <el-form ref="deptForm" :model="form" :rules="rules">
      <el-form-item prop="name" label="部门名称" label-width="120px">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="code" label="部门编号" label-width="120px">
        <el-input v-model="form.code" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" label-width="120px">
        <el-select
          v-model="form.manager"
          placeholder="请选择负责人"
          style="width:100%"
          @focus="getEmployee"
          prop="manager"
        >
          <el-option
            v-for="(item, index) in empList"
            :key="index"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍" label-width="120px">
        <el-input
          type="textarea"
          v-model="form.introduce"
          autocomplete="off"
          :rows="4"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="btnNo">取 消</el-button>
      <el-button type="primary" @click="btnOK">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 获取部门列表
import { getDepartments } from '@/api/departments'
// 获取员工列表接口
import { getEmpSimple } from '@/api/employees'
//新增部门接口 //获取部门详细信息   // 编辑部门接口
import {
  addDepartments,
  getDeptdetails,
  editDepartments
} from '@/api/departments'
export default {
  // 父组件传递过来的信息
  props: {
    //  点击新增按钮弹出dialog
    showDialog: {
      type: Boolean,
      default: false
    },
    // 传过来的id
    pid: {
      type: String,
      required: true
    }
  },

  data () {
    //  自定义规则
    let checkName = async (rule, value, callback) => {
      // 调用获取部门接口
      let res = await getDepartments()
      if (this.form.id) {
        // 有id代表是编辑
        // 遍历所有部门数据 如果有和当前pid是相同的 就代表是同级 筛选出来得到一个数组
        let list = res.data.depts.filter(item => item.pid == this.form.pid)
        //  然后判断同级里是否有和自己名字是一样的 但是要除了自己之外
        let result = list.some(
          item => item.name == value && item.name != this.oldForm.name
        )
        // 三元表达式  如果上面结果得到的是true  这里就报错 如果是false  就不报错
        result ? callback(new Error('部门名称不能重复！')) : callback()
      } else {
        // 没有id  代表是新增
        //过滤数组  拿出所有的子节点 得到一个子节点的数组
        let list = res.data.depts.filter(item => item.pid == this.pid)
        //  遍历得到的子节点的数组 判断名称是否和输入的名称重复
        //  重复就报错
        let repetition = list.some(item => item.name == value)
        // console.log(repetition)
        // 三元表达式   如果结果是true（就代表重复） 就报错
        repetition ? callback(new Error('部门名称不能重复！')) : callback()
      }
    }
    // 判断部门编号是否重复
    let checkCode = async (rule, value, callback) => {
      // 获取所有部门列表
      let res = await getDepartments()
      let results
      if (this.form.id) {
        // 编辑
        results = res.data.depts.some(
          item => item.code == value && item.code != this.oldForm.code
        )
      } else {
        // 新增
        // 判断是否有重复 some方法 判断复杂数组
        //  如果数组中有这个数据 就会返回true  没有就会返回false
        results = res.data.depts.some(item => item.code == value)
        // 如果有重复就报错
        //  三元表达式  判断 results  如果是true 就代表有这个编码 就要报错  如果是false 就没有 不用报错
      }
      results ? callback(new Error('部门编码已经存在!')) : callback()
    }
    return {
      form: {}, // 表单绑定的数据
      empList: [], // 员工简单信息列表数据
      // 代表之前的数据  方便进行校验
      oldForm: {
        name: '',
        code: ''
      },
      //  表单校验规则
      rules: {
        name: [
          { required: true, trigger: 'blur', message: '请输入' },
          { min: 1, max: 50, message: '长度在1-50个字符之间', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        code: [
          { required: true, trigger: 'blur', message: '请输入' },
          { min: 1, max: 50, message: '长度在1-50个字符之间', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
        introduce: [
          { required: true, trigger: 'blur', message: '请输入' },
          {
            min: 1,
            max: 300,
            message: '长度在1-300个字符之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    //select获取焦点事件  调用获取员工基本信息 列表接口
    async getEmployee () {
      let res = await getEmpSimple()
      // 绑定数据
      this.empList = res.data
    },

    // 确定按钮的点击事件
    btnOK () {
      // 表单的全部校验
      // 要先给表单加ref属性 通过validate校验
      // 有一个参数  这个参数如果是true 就表示全部通过
      this.$refs.deptForm.validate(async isOk => {
        if (isOk) {
          // 判断是新增还是编辑
          if (this.form.id) {
            // 编辑
            // 调用编辑部门的接口
            await editDepartments(this.form)
            // 弹窗提示
            this.$message.success('编辑部门成功')
          } else {
            // 新增
            //调用新增部门的接口
            await addDepartments({ ...this.form, pid: this.pid })
            // 成功提示
            this.$message.success('添加部门成功')
          }
        }
        // 通知父组件 将对话框隐藏
        //  子组件 update:固定写法 (update:props名称, 值)
        this.$emit('update:showDialog', false)
        // 通知父组件重新获取列表数据
        this.$emit('addDept')
      })
    },
    // 取消按钮的点击事件
    btnNo () {
      this.form = {}
      // console.log('点击了取消')
      this.$refs.deptForm.resetFields() // 重置校验字段

      // 通知父组件  关闭对话框
      this.$emit('update:showDialog', false)
    },
    // 获取部门详情信息
    async editDept (id) {
      // 获取部门详情信息
      let res = await getDeptdetails(id)
      console.log(res)
      // 将获取到的数据绑定给form
      this.form = res.data
      // 保存获取到的name和code  方便做校验
      this.oldForm.name = res.data.name

      this.oldForm.code = res.data.code
    }
  },
  computed: {
    title () {
      return this.form.id ? '编辑部门' : '新增部门'
    }
  }
}
</script>

<style></style>
